<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--预加载-->
<div th:fragment="preload" id="hellopreloader">
    <div class="preloader">
        <svg width="45" height="45" stroke="#fff">
            <g fill="none" fill-rule="evenodd" stroke-width="2" transform="translate(1 1)">
                <circle cx="22" cy="22" r="6" stroke="none">
                    <animate attributeName="r" begin="1.5s" calcMode="linear" dur="3s" repeatCount="indefinite"
                             values="6;22"/>
                    <animate attributeName="stroke-opacity" begin="1.5s" calcMode="linear" dur="3s"
                             repeatCount="indefinite" values="1;0"/>
                    <animate attributeName="stroke-width" begin="1.5s" calcMode="linear" dur="3s"
                             repeatCount="indefinite" values="2;0"/>
                </circle>
                <circle cx="22" cy="22" r="6" stroke="none">
                    <animate attributeName="r" begin="3s" calcMode="linear" dur="3s" repeatCount="indefinite"
                             values="6;22"/>
                    <animate attributeName="stroke-opacity" begin="3s" calcMode="linear" dur="3s"
                             repeatCount="indefinite" values="1;0"/>
                    <animate attributeName="stroke-width" begin="3s" calcMode="linear" dur="3s" repeatCount="indefinite"
                             values="2;0"/>
                </circle>
                <circle cx="22" cy="22" r="8">
                    <animate attributeName="r" begin="0s" calcMode="linear" dur="1.5s" repeatCount="indefinite"
                             values="6;1;2;3;4;5;6"/>
                </circle>
            </g>
        </svg>
        <div class="text">Loading ...</div>
    </div>
</div>

<!--左侧菜单-->
<div class="fixed-sidebar" th:fragment="left_sidebar">
    <!--折叠时左侧菜单-->
    <div class="fixed-sidebar-left sidebar--small" id="sidebar-left">
        <a href="person_main.html" class="logo">
            <div class="img-wrap">
                <img src="../../img/logo.png" alt="Olympus">
            </div>
        </a>
        <div class="mCustomScrollbar" data-mcs-theme="dark">
            <ul class="left-menu">
                <!--切换菜单栏-->
                <li>
                    <a href="#" class="js-sidebar-open">
                        <svg class="olymp-menu-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                             data-original-title="切换菜单栏">
                            <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-menu-icon"></use>
                        </svg>
                    </a>
                </li>
                <!--新闻广场-->
                <li>
                    <a href="news.html">
                        <svg class="olymp-newsfeed-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                             data-original-title="新闻广场">
                            <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-newsfeed-icon"></use>
                        </svg>
                    </a>
                </li>
                <!--好友动态-->
                <li>
                    <a href="publish_friends.html">
                        <svg class="olymp-star-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                             data-original-title="好友动态">
                            <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-star-icon"></use>
                        </svg>
                    </a>
                </li>
                <!--个人中心-->
                <li>
                    <a href="person_detail.html">
                        <svg class="olymp-manage-widgets-icon left-menu-icon" data-toggle="tooltip"
                             data-placement="right" data-original-title="个人中心">
                            <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-manage-widgets-icon"></use>
                        </svg>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!--end折叠时左侧菜单-->
    <!--展开时左侧菜单-->
    <div class="fixed-sidebar-left sidebar--large" id="sidebar-left-1">
        <a href="person_main.html" class="logo">
            <div class="img-wrap">
                <img src="../../img/logo.png" alt="Olympus">
            </div>
            <div class="title-block">
                <h6 class="logo-title">olympus</h6>
            </div>
        </a>
        <div class="mCustomScrollbar" data-mcs-theme="dark">
            <ul class="left-menu">
                <!--切换菜单栏-->
                <li>
                    <a href="#" class="js-sidebar-open">
                        <svg class="olymp-close-icon left-menu-icon">
                            <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-close-icon"></use>
                        </svg>
                        <span class="left-menu-title">切换菜单栏</span>
                    </a>
                </li>
                <!--新闻广场-->
                <li>
                    <a href="news.html">
                        <svg class="olymp-newsfeed-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                             data-original-title="">
                            <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-newsfeed-icon"></use>
                        </svg>
                        <span class="left-menu-title">新闻广场</span>
                    </a>
                </li>
                <!--好友动态-->
                <li>
                    <a href="publish_friends.html">
                        <svg class="olymp-star-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                             data-original-title="">
                            <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-star-icon"></use>
                        </svg>
                        <span class="left-menu-title">好友动态</span>
                    </a>
                </li>
                <!--个人中心-->
                <li>
                    <a href="person_detail.html">
                        <svg class="olymp-manage-widgets-icon left-menu-icon" data-toggle="tooltip"
                             data-placement="right" data-original-title="">
                            <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-manage-widgets-icon"></use>
                        </svg>
                        <span class="left-menu-title">个人中心</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!--end展开时左侧菜单-->
</div>

<header class="header" id="site-header" th:fragment="header">
    <div class="page-title">
        <h6>动态详情</h6>
    </div>
    <div class="header-content-wrapper">
        <!--数据：搜索-->
        <form class="search-bar w-search notification-list friend-requests">
            <div class="form-group with-button">
                <input class="form-control" placeholder="搜索人或事……" type="text" required/>
                <button>
                    <svg class="olymp-magnifying-glass-icon">
                        <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-magnifying-glass-icon"></use>
                    </svg>
                </button>
            </div>
        </form>
        <!--end数据：搜索-->
        <div class="control-block">
            <!--导航栏用户-->
            <div class="author-page author vcard inline-items more">
                <div class="author-thumb">
                    <!--数据：当前用户头像-->
                    <img alt="author" src="../../img/author-page.jpg" class="当前用户">
                    <div class="more-dropdown more-with-triangle">
                        <div class="mCustomScrollbar" data-mcs-theme="dark">
                            <div class="ui-block-title ui-block-title-small">
                                <h6 class="title">当前</h6>
                            </div>
                            <ul class="account-settings">
                                <li>
                                    <a href="person_detail.html">
                                        <svg class="olymp-menu-icon">
                                            <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-menu-icon"></use>
                                        </svg>
                                        <span>个人资料</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="publish_add.html">
                                        <svg class="olymp-star-icon left-menu-icon" data-toggle="tooltip"
                                             data-placement="right" data-original-title="FAV PAGE">
                                            <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-star-icon"></use>
                                        </svg>
                                        <span>发表动态</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="logged_out.html">
                                        <svg class="olymp-logout-icon">
                                            <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-logout-icon"></use>
                                        </svg>
                                        <span>登出</span>
                                    </a>
                                </li>
                            </ul>
                        </div>

                    </div>
                </div>
                <!--数据：当前用户昵称-->
                <a href="person_main.html" class="author-name fn">
                    <div class="author-title">
                        James Spiegel
                        <svg class="olymp-dropdown-arrow-icon">
                            <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-dropdown-arrow-icon"></use>
                        </svg>
                    </div>
                </a>
            </div>
            <!--end导航栏用户-->
        </div>
    </div>
</header>


<div th:fragment="footer">
    <script src="../../js/jQuery/jquery-3.4.1.js" th:src="@{/js/jQuery/jquery-3.4.1.js}"></script>
    <script src="../../js/libs/jquery.appear.js" th:src="@{/js/libs/jquery.appear.js}"></script>
    <script src="../../js/libs/jquery.mousewheel.js" th:src="@{/js/libs/jquery.mousewheel.js}"></script>
    <script src="../../js/libs/perfect-scrollbar.js" th:src="@{/js/libs/perfect-scrollbar.js}"></script>
    <script src="../../js/libs/jquery.matchHeight.js" th:src="@{/js/libs/jquery.matchHeight.js}"></script>
    <script src="../../js/libs/svgxuse.js" th:src="@{/js/libs/svgxuse.js}"></script>
    <script src="../../js/libs/imagesloaded.pkgd.js" th:src="@{/js/libs/imagesloaded.pkgd.js}"></script>
    <script src="../../js/libs/Headroom.js" th:src="@{/js/libs/Headroom.js}"></script>
    <script src="../../js/libs/velocity.js" th:src="@{/js/libs/velocity.js}"></script>
    <script src="../../js/libs/ScrollMagic.js" th:src="@{/js/libs/ScrollMagic.js}"></script>
    <script src="../../js/libs/jquery.waypoints.js" th:src="@{/js/libs/jquery.waypoints.js}"></script>
    <script src="../../js/libs/jquery.countTo.js" th:src="@{/js/libs/jquery.countTo.js}"></script>
    <script src="../../js/libs/popper.min.js" th:src="@{/js/libs/popper.min.js}"></script>
    <script src="../../js/libs/material.min.js" th:src="@{/js/libs/material.min.js}"></script>
    <script src="../../js/libs/bootstrap-select.js" th:src="@{/js/libs/bootstrap-select.js}"></script>
    <script src="../../js/libs/smooth-scroll.js" th:src="@{/js/libs/smooth-scroll.js}"></script>
    <script src="../../js/libs/selectize.js" th:src="@{/js/libs/selectize.js}"></script>
    <script src="../../js/libs/swiper.jquery.js" th:src="@{/js/libs/swiper.jquery.js}"></script>
    <script src="../../js/libs/isotope.pkgd.js" th:src="@{/js/libs/isotope.pkgd.js}"></script>
    <script src="../../js/libs/ajax-pagination.js" th:src="@{/js/libs/ajax-pagination.js}"></script>
    <script src="../../js/libs/circle-progress.js" th:src="@{/js/libs/circle-progress.js}"></script>
    <script src="../../js/libs/loader.js" th:src="@{/js/libs/loader.js}"></script>
    <script src="../../js/libs/run-chart.js" th:src="@{/js/libs/run-chart.js}"></script>
    <script src="../../js/libs/jquery.magnific-popup.js" th:src="@{/js/libs/jquery.magnific-popup.js}"></script>
    <script src="../../js/libs/ion.rangeSlider.js" th:src="@{/js/libs/ion.rangeSlider.js}"></script>

    <script src="../../js/main.js" th:src="@{/js/main.js}"></script>
    <script src="../../js/libs-init/libs-init.js" th:src="@{/js/libs-init/libs-init.js}"></script>
    <script defer src="../../fonts/fontawesome-all.js" th:src="@{/fonts/fontawesome-all.js}"></script>

    <script src="../../Bootstrap/dist/js/bootstrap.bundle.js" th:src="@{/Bootstrap/dist/js/bootstrap.bundle.js}"></script>



</div>

</body>
</html>